<template>
    <div id="app">
        <div id="view" ref="view">
            <van-nav v-show='show' :title="title"></van-nav>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
        <van-tabbar route v-model="active" @change="Switch">
            <van-tabbar-item to="/index" icon="hot-o">热卖</van-tabbar-item>
            <van-tabbar-item to="/order" icon="todo-list-o">订单</van-tabbar-item>
            <van-tabbar-item to="/cart" :info="$store.state.count||''" icon="shopping-cart-o">购物车</van-tabbar-item >
            <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<style lang="stylus">
    .aaaaaa
        /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
        -ms-overflow-style:none;
        /*火狐下隐藏滚动条*/
        overflow:-moz-scrollbars-none;
        /*Chrome下隐藏滚动条，溢出可以透明滚动*/
        &::-webkit-scrollbar
            width:0px

</style>

<style scoped lang="stylus">

    #app
        max-width:720px
        height:100vh
        max-height:100vh
        overflow-y:hidden
        margin:0 auto
        text-align: center
    #view
        box-sizing :border-box
        padding-bottom:56px
        height:100%
        max-height:100%
        overflow-y:auto
</style>
<script>
import { NavBar, Tabbar, TabbarItem } from "vant";
export default {
    methods: {
        Getheight(){
            const h = window.innerHeight-56+"px"
            this.$store.commit("Setviewheight",h)
        },
        Setheight(){
            this.$refs.view.style.height = this.$store.viewHeight
        },
        Switch(index) {
            switch (index) {
                case 1:
                    this.title = '历史订单'
                    this.show = 1
                    break;
                case 2:
                    this.title = '购物车'
                    this.show = 1
                    break
                default:
                    this.show = 0
                    break;
            }
        }
    },
    components: {
        "van-nav": NavBar,
        "van-tabbar": Tabbar,
        "van-tabbar-item": TabbarItem
    },
    data: () => ({
        title:'',
        active: 0,
        show:false
    }),
    mounted(){
        this.Setheight()
        window.οnresize=() => {
            this.Getheight()
            this.Setheight()
        }
    },
    beforeMount(){
        this.Getheight()
    },
    beforeUpdate(){
        this.Getheight()
        this.Setheight()
    }
};
</script>
